<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全部事件</title>
  <link rel="stylesheet" href="../Package/element/element.css">
  <link rel="stylesheet" href="../Package/css/event.css">
</head>

<body>
  <div id="app">
    <div class="fromClass">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="70px">
        <el-form-item label="事件类型">
          <el-select clearable v-model="formInline.eType" placeholder="请选择事件类型">
            <el-option v-for="item in eventList" :label="item.eventName" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址">
          <el-input clearable v-model="formInline.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input clearable v-model="formInline.details" placeholder="请输入事件描述"></el-input>
        </el-form-item>
        <el-form-item label="事件状态">
          <el-select clearable v-model="formInline.eStatus" placeholder="请选择事件状态">
            <el-option label="未处理" value="0"></el-option>
            <el-option label="处理中" value="1"></el-option>
            <el-option label="已处理" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker clearable v-model="formInline.eCreateTime" type="datetime" placeholder="请输入开始时间"
            :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker clearable v-model="formInline.eEndTime" type="datetime" placeholder="请输入结束时间"
            :picker-options="pickerOptions0"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Inquirelist">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottomContent">
      <ul class="contentList">
        <template v-for="item in list">
          <li class="container" @click="getTaskListy(item)" :class="classBg(item.eStatus)">
            <div class="container-top">
              <span>
            		<img src="../../ndzd/Package/images/bs.png" style="width: 23px;height: 23px;float: left;"/>
            		<p style="display: inline-block;line-height: 23px;margin-left: 5px;">{{userputaddtow(item.eType)}}</p>              
              </span>
              <el-button :type="ClassName(item.eStatus)" size="mini" round>{{item.eStatus == 0 ? '未处理' : (item.eStatus
                == 1 ? '处理中' : '已完成')}}</el-button>
            </div>
            <div class="container-center">
              {{item.details}}
            </div>
            <div class="container-bottom" style="color: #666c7d;">{{item.eCreateTime}}</div>
            <div class="container-bottom" style="color: #303133;">{{item.address}}</div>
          </li>
        </template>
        <li v-if="list.length == 0">
          暂无数据
        </li>
      </ul>
      <el-pagination v-if="list.length != 0" :page-sizes="[15, 20, 25, 30]" background layout="sizes, prev, pager, next"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </div>

    <el-dialog title="处置记录" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div style="max-height:550px; overflow: auto;padding: 10px; ">
				<div>
					<p>事件图片</p>
					<template v-for="items in eventimageList">
						<div style="margin: 5px;display: inline-block;">
					    <el-image style="width: 80px; height: 80px" :src="httpimg + items"
					      :preview-src-list="eventsrcListurl(eventimageList)"></el-image>
						</div>
					</template>
				</div>
        <el-timeline>
          <template v-for="item in Theplanningstep">
            <el-timeline-item :timestamp="item.handleCreateTime + '-' + item.handleTitle" placement="top" type="primary"
              size="large">
              <el-card shadow="always">
					      <h3 style="color: #666c7d;">{{item.handleRemark}}</h3>
	              <p style="padding: 5px 0; color: #666c7d;font-size: 16px;" v-if="item.personName">反馈人: {{item.personName}}</p>
	              <!-- 图片展示 -->
	              <template v-for="itemss in item.imageList">
	              	<div style="margin: 5px;display: inline-block;">
		                <el-image style="width: 80px; height: 80px" :src="httpimg + itemss"
		                  :preview-src-list="srcListurl(Theplanningstep)"></el-image>
	              	</div>
	              </template>
	              <!-- 录音文件 -->
	              <div>
	              	<template v-for="videos in item.voiceList">
		                <div style="width: 45%; margin: 10px 2%;display: inline-block;">
		                  <audio :src="httpimg + videos" controls="controls" style="width: 100%;">
		                    您的浏览器不支持 audio 标签。
		                  </audio>
		                </div>
		              </template>
	              </div>
	              
					    </el-card>
              
            </el-timeline-item>
          </template>
        </el-timeline>
        <p v-if="Theplanningstep.length == 0" style="text-align: center;">暂无数据</p>
      </div>
    </el-dialog>
  </div>
  <script src="../Package/js/jquery-1.7.2.js"></script>
  <script src="../Package/js/config.js"></script>
  <script src="../Package/js/vue.js"></script>
  <script src="../Package/element/element.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        dialogVisible: false, // 弹出框
        formInline: {
          eType: '',  //事件类型
          address: '',//地址
          details: '',// 事件描述
          eStatus: '',// 事件状态
          eCreateTime: '',// 开始时间
          eEndTime: '', // 结束时间
          pageNum: 1, // 页数
          pageSize: 15, // 条数
        },
        eventList: [], // 事件类型
        list: [], // 数据
        total: 0, // 数据量
        Theplanningstep: [], // 预案步骤列表
				httpimg: httpimg,  //图片
				eventimageList: [],   //事件图片
        pickerOptions: {
          disabledDate(time) {
            if (vm.formInline.eEndTime) {
              return time.getTime() > vm.formInline.eEndTime;//如果没有后面的-8.64e7就是不可以选择今天的
            } else {
              return;
            }
          }
        },
        pickerOptions0: {
          disabledDate(time) {
            if (vm.formInline.eCreateTime) {
              return time.getTime() < vm.formInline.eCreateTime;//如果没有后面的-8.64e7就是不可以选择今天的
            } else {
              return;
            }
          }
        },

      },
      created() {
        this.getList(); // 获取列表
        this.getEvent();// 事件类型
      },
      methods: {
        // 获取初始值
        getList() {
          $.ajax({
            type: 'GET',
            url: httpurl + 'event/manager/event/getAllEvent',
            data: this.formInline,
            contentType: "application/json",
            dataType: 'json',
            headers: {
              Authorization: localStorage.getItem('token')
            },
            success: function (data) {
              console.log(data)
              vm.list = data.rows // 数据
              vm.total = data.total // 页数
            }
          })
        },
        // 获取事件列表
        getEvent() {
          $.ajax({
            type: 'GET',
            url: httpurl + 'event/manager/exigencyEvent/getEventAll',
            data: {},
            contentType: "application/json",
            dataType: 'json',
            headers: {
              Authorization: localStorage.getItem('token')
            },
            success: function (data) {
              console.log(data)
              vm.eventList = data.data
            }
          })
        },
        // 查询
        Inquirelist() {
        	console.log(this.formInline.eCreateTime,this.formInline.eEndTime)
          this.formInline.eCreateTime = this.formInline.eCreateTime == '' || this.formInline.eCreateTime == null ? '' : date(this.formInline.eCreateTime);
          this.formInline.eEndTime = this.formInline.eEndTime == '' || this.formInline.eEndTime == null ? '' : date(this.formInline.eEndTime)
          console.log(this.formInline);

          this.getList();
        },
        // 返回当前事件类型
        userputaddtow(id) {
          for (let [key, val] of Object.entries(this.eventList)) {
            if (val.id == id) {
              return val.eventName;
              break;
            }
          }
        },
        handleSizeChange(val) {
          this.formInline.pageSize = val;
          this.formInline.pageNum = 1;
          this.getList();
        },
        handleCurrentChange(val) {
          this.formInline.pageNum = val;
          this.getList();
        },
        classBg(eState) {
          // switch (eState) {
          //   case '0':
          //     return 'bgred';
          //     break;
          //   case '1':
          //     return 'bgyellow';
          //     break;
          //   case '2':
          //     return 'bggreen';
          //     break;
          // }
        },
        ClassName(eState) {
          switch (eState) {
            case '0':
              return 'danger';
              break;
            case '1':
              return 'warning';
              break;
            case '2':
              return 'success';
              break;
          }
          // return 'primary';
        },
        handleClose(done) {
          // this.$confirm('确认关闭？')
          //   .then(_ => {
          //     done();
          //   })
          //   .catch(_ => { });
          done();
        },
        getTaskListy(data) {
          if (data.eStatus == 0) {
            return this.$message.error('事件暂未处理，请重试');
          }
					this.eventimageList = data.spare.split(',');
          // 处理记录
          $.ajax({
            xhrFields: {
              withCredentials: true,
            },
            type: 'get',
            url: httpurl + 'event/manager/handle/list',
            data: {
              handleEventId: data.eId
            },
            dataType: 'json',
            contentType: "application/json",
            headers: {
              Authorization: localStorage.getItem('token')
            },
            success: function (data) {
              vm.dialogVisible = true;
              vm.Theplanningstep = data.rows
            },
            error: function (err) {
              // 失败的回调
            }
          })
        },
        
	      srcListurl(data) {
	        let url = [];
	        for (let [key, val] of Object.entries(data)) {
	          if (val.imageList) {
	            for (let [keys, vals] of Object.entries(val.imageList)) {
	              url.push(httpimg + vals)
	            }
	          }
	        }
	        return url;
	      },	      
				eventsrcListurl(data) {
	        let url = [];
	        for (let [key, val] of Object.entries(data)) {
	          if (val) {
	            url.push(httpimg + val)
	          }
	        }
	        return url;
	      }
      }
    })

    // 事件格式转换
    function date(data) {
      const d = new Date(data);
      function p(s) {
        return s < 10 ? '0' + s : s
      }

      const resDate = d.getFullYear() + '-' + p((d.getMonth() + 1)) + '-' + p(d.getDate())
      const resTime = p(d.getHours()) + ':' + p(d.getMinutes()) + ':' + p(d.getSeconds())

      return `${resDate} ${resTime}`
    }

  </script>
</body>

</html>